<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6.真实源码探索</title>
</head>
<body>
<script type="module">
    import {
        computed,
        reactive,
        watchEffect,
        effect,
        watch,
        ref,
        toRef,
        toRefs
    } from "../js/vue.esm-browser.prod.js";

    // 1) 收集索引
    // const arr = reactive([1])
    // effect(() => {
    //     // 通过索引可以访问收集依赖，track arr 0
    //     console.log(arr[3]) // 这里没有收集length
    // })
    // arr[0] = 2 // 收集的arr[3], 触发不了依赖更新
    // arr.length = 0 // 修改长度要触发索引的触发 改的是length（真实源码内更新length也会触发依赖更新）
    // arr[3] = 1

    // 2) 长度收集
    // const arr = reactive([1])
    // effect(() => {
    //     // 通过索引访问可以收集依赖
    //     console.log(arr.length)
    // })
    // arr[100] = 2 // 修改索引, 如果添加应该触发长度更新

    // 3) 数组方法
    // 访问变异方法会访问数组的长度，会对长度进行依赖，这里我们停止收集调用方法
    const arr = reactive([])
    effect(() => {
        console.log('effect1')
        arr.push({}) // 会收集length
    })
    effect(() => {
        console.log('effect2')
        arr.push({}) // 会收集length 相互更新对方依赖死循环
        // 解决方案就是在effect这里边对length不收集
    })
    arr.push(1) // 修改length

</script>
</body>
</html>
